// Copyright 2024 The Perses Authors
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
// http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.

import { ReactElement, useState } from 'react';
import { Checkbox, FormGroup, FormControlLabel, Typography } from '@mui/material';
import { DEFAULT_REFRESH_INTERVAL_OPTIONS, useTimeRange } from '@perses-dev/plugin-system';
import { isRelativeTimeRange } from '@perses-dev/core';
import { Dialog } from '@perses-dev/components';
import { useSaveChangesConfirmationDialog, useVariableDefinitionActions } from '../../context';

const SAVE_DEFAULTS_DIALOG_TEXT =
  'You have made changes to the time range or the variables values. Would you like to save these as defaults?';

export const SaveChangesConfirmationDialog = (): ReactElement => {
  const { saveChangesConfirmationDialog: dialog } = useSaveChangesConfirmationDialog();
  const isSavedDurationModified = dialog?.isSavedDurationModified ?? true;
  const isSavedVariableModified = dialog?.isSavedVariableModified ?? true;
  const isSavedRefreshIntervalModified = dialog?.isSavedRefreshIntervalModified ?? true;

  const [saveDefaultTimeRange, setSaveDefaultTimeRange] = useState(isSavedDurationModified);
  const [saveDefaultVariables, setSaveDefaultVariables] = useState(isSavedVariableModified);
  const [saveDefaultRefreshInterval, setDefaultRefreshInterval] = useState(isSavedRefreshIntervalModified);

  const { getSavedVariablesStatus } = useVariableDefinitionActions();
  const { modifiedVariableNames } = getSavedVariablesStatus();

  const isOpen = dialog !== undefined;

  const { timeRange, refreshInterval } = useTimeRange();

  const currentTimeRangeText = isRelativeTimeRange(timeRange)
    ? `(Last ${timeRange.pastDuration})`
    : '(Absolute time ranges can not be saved)';

  const saveTimeRangeMessage = `Save current time range as new default ${currentTimeRangeText}`;

  const saveVariableMessage = `Save current variable values as new default (${
    modifiedVariableNames.length > 0 ? modifiedVariableNames.join(', ') : 'No modified variables'
  })`;

  const refreshIntervalDisplay = DEFAULT_REFRESH_INTERVAL_OPTIONS.some((i) => i.display === refreshInterval)
    ? refreshInterval
    : DEFAULT_REFRESH_INTERVAL_OPTIONS.find((i) => i.value.pastDuration === refreshInterval)?.display;

  const saveRefreshIntervalMessage = `Save current refresh interval as new default ${refreshIntervalDisplay ? `(${refreshIntervalDisplay})` : 'refresh interval not modified'}`;

  return (
    <Dialog open={isOpen}>
      {dialog !== undefined && (
        <>
          <Dialog.Header onClose={() => dialog.onCancel()}>Save Dashboard</Dialog.Header>

          <Dialog.Content>
            <Typography marginBottom={2}>{dialog.description || SAVE_DEFAULTS_DIALOG_TEXT}</Typography>
            <FormGroup>
              <FormControlLabel
                control={
                  <Checkbox
                    disabled={!isSavedDurationModified || !isRelativeTimeRange(timeRange)}
                    checked={saveDefaultTimeRange && isSavedDurationModified && isRelativeTimeRange(timeRange)}
                    onChange={(e: React.ChangeEvent<HTMLInputElement>) => setSaveDefaultTimeRange(e.target.checked)}
                  />
                }
                label={saveTimeRangeMessage}
              />
              <FormControlLabel
                control={
                  <Checkbox
                    disabled={!isSavedRefreshIntervalModified}
                    checked={saveDefaultRefreshInterval && isSavedRefreshIntervalModified}
                    onChange={(e: React.ChangeEvent<HTMLInputElement>) => setDefaultRefreshInterval(e.target.checked)}
                  />
                }
                label={saveRefreshIntervalMessage}
              />
              <FormControlLabel
                control={
                  <Checkbox
                    disabled={!isSavedVariableModified}
                    checked={saveDefaultVariables && isSavedVariableModified}
                    onChange={(e: React.ChangeEvent<HTMLInputElement>) => setSaveDefaultVariables(e.target.checked)}
                  />
                }
                label={saveVariableMessage}
              />
            </FormGroup>
          </Dialog.Content>

          <Dialog.Actions>
            <Dialog.PrimaryButton
              onClick={() => {
                return dialog.onSaveChanges(saveDefaultTimeRange, saveDefaultRefreshInterval, saveDefaultVariables);
              }}
            >
              Save Changes
            </Dialog.PrimaryButton>
            <Dialog.SecondaryButton onClick={() => dialog.onCancel()}>Cancel</Dialog.SecondaryButton>
          </Dialog.Actions>
        </>
      )}
    </Dialog>
  );
};
